<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/14.css">
</head>
<body>
    <div style="border: 1px solid black;height: 200px">占位</div>
    <br>
    <div class="div-box">
        <br><br><br>
        <ul class="ul-box">
            <li>元素1</li>
            <li>元素2</li>
            <li class="rel-item">元素3</li>
            <li>元素4</li>
            <li class="abs-item">元素5</li>
            <li>-----元素6-----</li>
            <li>元素7</li>
            <li class="fiexd-item">元素8</li>
            <li>-----元素9-----</li>
        </ul>
    </div>
    <hr>
    <div class="sticky-box">
        <ul>
            <li>元素1</li>
            <li>元素2</li>
            <li>元素3</li>
            <li>元素4</li>
            <li class="st-item" style="z-index:-1">元素5</li>
            <li>元素6</li>
            <li>元素7</li>
            <li>元素8</li>
            <li>元素9</li>
            <li>元素10</li>
            <li class="st-item" style="z-index: 1">元素11</li>
            <li>元素12</li>
            <li>元素13</li>
            <li>元素14</li>
            <li>元素15</li>
            <li class="st-item" style="z-index: 0">元素16</li>
            <li>元素17</li>
            <li>元素18</li>
            <li>元素19</li>
            <li>元素20</li>
            <li>元素17</li>
            <li>元素18</li>
            <li>元素19</li>
            <li>元素20</li>
        </ul>
    </div>
    <hr>
    <div class="box-w-h">
        四角拉伸定位
    </div>
</body>
</html>